<!DOCTYPE html>
<html>
<head>
    <title>项目管理</title>
    #parse("include/header.html")
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/projectManage/projProgress.css">
</head>
<body>
<!--进度任务-->
<div id="projProgress" class="clearfix" v-cloak>
    <!--步骤-->
    <div class="col-md-2 column" Style="width: 180px;" :style="styleObj">
        <div class="col-md-12 column left-panel-title">
            <div class="point color-blue"></div>
            <div class="point color-orange"></div>
            <div class="point color-gray"></div>
            已完成\执行中\未完成
        </div>
        <div class="left-panel-list" >
            <div class="left-panel-slimScroll">
                <div class="left-panel-begin-step display-flex">
                    <div class="progress-line-begin color-blue" >
                    </div>
                    <div :calss="{stepActive : (stepId=='')}">
                        <div><span @click="load(null)">全部阶段</span></div>
                        <div><span style="color:#999999">[完成情况:{{projectInfo.unCompStep}}/{{projectInfo.allStep}}]</span></div>
                    </div>
                </div>
                <div v-for="(item, index) in steps" class="left-panel-step" >
                    <div class="progress-line "
                         :class="{'color-blue':(item.state==2),'color-gray':(item.state==0),'gradient-blue-orange':(item.state==1)}">
                    </div>
                    <div class="step-div" :class="{stepActive : (stepId==item.stepId)}" @click="load(item.stepId)">
                        <div class="progress-line-stage point"
                             :class="{'color-blue':(item.state==2),'color-gray':(item.state==0),'color-orange':(item.state==1)}">
                        </div>
                        <div>
                            <div><span>{{item.stepName}}</span>
                                <a v-if="item.state==1" class="btn-step-operation" @click="finishStage(item)">完成本阶段</a>
                            </div>
                            <div><span style="color:#999999">[完成情况:<span style="color:#ea9066;">{{item.compTask}}</span>/{{item.allTask}}]</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--列表-->
    <div class="col-md-10" Style="width: calc(100% - 180px);" :style="styleObj">
        <div class="center-panel-list" >
            <div class="center-panel-slimScroll">
                <!--任务列表面板-->
                <div class="col-md-12 column">
                    <div class="col-md-6 column ">
                        <span style="font-weight: bold;">任务</span>[ 未完成任务：<span class="font-red">{{projectInfo.unCompTask}}</span> ]
                    </div>
                    <div class="col-md-6 column btn-link-group">
                        <a v-show="isEdit" href="#">xls导入任务</a>&nbsp;&nbsp;
                        <a v-show="isEdit" href="#" @click="addTaskPanel('')">添加任务</a>&nbsp;&nbsp;
                        <a v-show="isEdit" href="#" @click="editTask">完成编辑</a>
                        <a v-show="!isEdit" href="#" @click="editTask">任务编辑</a>&nbsp;&nbsp;
                        <a href="#">查看所有任务</a>
                    </div>
                </div>
                <div class="col-md-12 column">
                    <div class="panel-group" id="panel-organ">
                        <div v-for="(data,index) in tasks" class="panel panel-default">
                            <div class="panel-heading panel-heading-task">
                                <div class="col-md-11 column panel-heading-title" @click="showDetail(data.taskId)">
                                    <span :class="{'square':(data.state==0),'triangle-orange':(data.state==1),'circular-green':(data.state==2)}" >
                                    </span>
                                    <span>{{data.taskTitle}}</span>
                                    <span :class="data.isTimeOut?'label-gray':'label-pink'">{{data.taskDate}}{{data.taskStaff}}</span>
                                </div>
                                <div class="col-md-1 column" style="width: 50px">
                                    <button v-show="isEdit" class="btn-add-gray" type="button" title="新增子任务" @click="addTaskPanel(data.taskId)"></button>
                                    <button v-show="isEdit" class="btn-delete-red" type="button" title="删除任务" @click="delTask(data.taskId,data.subTaskList)"></button>
                                    <button v-show="!isEdit" class="btn-triangle-gray" type="button" title="开始任务" @click="startTask(data.taskId)"></button>
                                    <button v-show="!isEdit" class="btn-circular-gray" type="button" title="完成任务" @click="finishTask(data)"></button>
                                </div>
                                <div class="display-flex float-right " >
                                    <div class="vertical-divider"></div>
                                    <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-organ" :href="'#panel-element-'+index">
                                        <span v-show="data.expand"  @click="data.expand=!data.expand" class="treegrid-expander glyphicon glyphicon-chevron-up"></span>
                                        <span v-show="!data.expand" @click="data.expand=!data.expand" class="treegrid-expander glyphicon glyphicon-chevron-down" ></span>
                                    </a>
                                </div>
                            </div>
                            <div :id="'panel-element-'+index" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div v-for="(item, index) in data.subTaskList" class="panel-body-task">
                                        <div class="col-md-11 panel-heading-title" @click="showDetail(item.taskId)">
                                                                     <span :class="{'square':(item.state==0),
                                                                     'triangle-orange':(item.state==1),
                                                                     'circular-green':(item.state==2)}" >
                                                                         &nbsp;&nbsp;&nbsp;&nbsp;
                                                                    </span>
                                            <span>{{item.taskTitle}}</span>
                                            <span :class="item.isTimeOut?'label-gray':'label-pink'">{{item.taskDate}}{{item.taskStaff}}</span>
                                        </div>
                                        <div class="col-md-1 column display-flex" style="width: 50px" >
                                            <button v-show="isEdit" class="btn-delete-red" type="button" title="删除任务" @click="delTask(item.taskId)"></button>
                                            <button v-show="(!isEdit)&&item.state==0"    class="btn-triangle-gray"
                                                    type="button" title="开始任务" @click="startTask(item.taskId)"></button>
                                            <button v-show="(!isEdit)&&!(item.state==2)" class="btn-circular-gray"
                                                    type="button" title="完成任务" @click="finishTask(item)"></button>
                                        </div>
                                        <div class="col-md-12 column horizontal-divider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--新增子任务面板-->
                <div v-show="isAddTask" class="col-md-12 column add-panel-task">
                    <div class="col-md-12 column display-flex">
                        <div class="col-md-6 column display-flex">
                            <label><img :src="icon_Title"></label>
                            <input v-model="taskTitle" class="form-control" id="taskTitle" title="" :placeholder="parentTask===''?'请输入任务名称':'请输入二级任务名称'">
                        </div>
                        <div class="col-md-3 column display-flex">
                            <label><img :src="icon_User"></label>
                            <input v-model="taskStaff" class="form-control" @click="selectStaff" readonly placeholder="请指定负责人">
                        </div>
                        <div class="col-md-3 column display-flex">
                            <label><img :src="icon_Date"></label>
                            <input v-model="finishDate" id="finishDate" class="form-control datePicker" readonly placeholder="截止时间">
                        </div>
                    </div>
                    <div class="col-md-12 column display-flex">
                        <div class="col-md-6">
                            <button class="btn btn-sm btn-info" @click="saveTask">任务添加</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span><a @click="closeTaskPanel">取消</a></span>
                        </div>
                        <div class="col-md-6 btn-link-group">
                            <a href="#" @click="addTask" >如果要对任务进行描述或者检查项，请点击此处</a>
                        </div>
                    </div>
                </div>
                <!--日程列表面板-->
                <div class="col-md-12 column">
                    <div class="col-md-6 column">
                        <span style="font-weight: bold;">日程</span>[ 未完成日程：<span style="color:#d9534f">{{unCompSchedule}}</span> ]
                    </div>
                    <div class="col-md-6 column btn-link-group">
                        <a href="#" @click="addSchePanel">添加日程</a>&nbsp;&nbsp;
                        <a href="#" @click="queryAllSche">查看所有日程</a>
                    </div>
                </div>
                <div class="col-md-12 column" id="panel-schedules" >
                    <div v-for="(item,index) in schedules" class="col-md-12 column">
                        <div  class="col-md-1" style="width: 70px;">{{item.scheduleDate}}</div>
                        <div  class="col-md-10 column" style="width: calc(100% - 130px);">
                            <span>{{item.content}}</span>
                            <span class="label-gray">{{item.participantName}}</span>
                        </div>
                        <div  class="col-md-1" style="width: 50px;">
                            <button v-if="item.creator==item.userId" class="btn-delete-red" type="button"
                                    title="删除日程" @click="delSchedule(item.scheduleId)"></button>
                        </div>
                        <div class="col-md-12 column horizontal-divider"></div>
                    </div>
                </div>
                <!--日程添加面板-->
                <div v-show="isAddSche" class="col-md-12 column add-panel-task">
                    <div class="col-md-12 column display-flex">
                        <div class="col-md-6 column display-flex">
                            <label><img :src="icon_Title"></label>
                            <input v-model="content" class="form-control"  placeholder="请输入日程内容">
                        </div>
                        <div class="col-md-3 column display-flex">
                            <label><img :src="icon_User"></label>
                            <input v-model="participantName" class="form-control" @click="selectScheStaff" readonly placeholder="请指定参与人">
                        </div>
                        <div class="col-md-3 column display-flex">
                            <label><img :src="icon_Date"></label>
                            <input v-model="scheEndDate" id="scheDate" class="form-control" readonly placeholder="截止时间">
                        </div>
                    </div>
                    <div class="col-md-12 column display-flex">
                        <div class="col-md-6">
                            <button class="btn btn-sm btn-info" @click="saveSche">添加日程</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span><a @click="closeSchePanel">取消</a></span>
                        </div>
                        <div class="col-md-6 btn-link-group">
                            <a href="#" @click="addSchedule">要配置其他日程属性？点击配置</a>
                        </div>
                    </div>
                </div>

                <!-- 新增日程 -->
                <div id="addSchedulePanel" class="container-fluid" style="display: none;">
                    <table class="form">
                        <tr>
                            <td class="formTitle">日程内容:</td>
                            <td class="formValue" colspan="3">
                                <input class="form-control" v-model="content" placeholder="请输入日程内容！" />
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle">开始时间:</td>
                            <td class="formValue"><input class="form-control" id="scheStartDate" v-model="scheStartDate" placeholder="请选择开始时间！" /></td>
                            <td class="formTitle">截止时间:</td>
                            <td class="formValue"><input class="form-control" id="scheEndDate" v-model="scheEndDate" placeholder="请选择截止时间！" /></td>
                        </tr>
                        <tr>
                            <td class="formTitle">所属项目:</td>
                            <td class="formValue" colspan="3">
                                <input class="form-control" v-model="projId" placeholder="请选择项目类型！" />
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle">参与人员:</td>
                            <td class="formValue" colspan="3">
                                <input class="form-control" v-model="participantName" placeholder="请选择参与人员！" @click="selectScheStaff"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle" colspan="2">&nbsp;</td>
                            <td class="formTitle" colspan="2">
                                <div style="display: inline-flex;line-height: 2.25;text-align: right;">
                                    <span><input type="checkbox" :checked="repeatFlag" @click="function(){repeatFlag=!repeatFlag;}" title=""/></span>
                                    <span>&nbsp;每月&nbsp;</span>
                                    <span><input type="number"  min="1" max="31" maxlength="2" onkeyup="repeatDay=value>31?31:value"
                                                 class="form-control" style="width: 28px;" v-model="repeatDay" :readonly="!repeatFlag" title=""/></span>
                                    <span>&nbsp;号重复事件，直到截至时间</span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="formTitle" colspan="2">&nbsp;</td>
                            <td class="formTitle" colspan="2">
                                <div style="display: inline-flex;line-height: 2.25;text-align: right;">
                                    <span><input type="checkbox" :checked="noticeFlag" @click="function(){noticeFlag=!noticeFlag;}" title=""/></span>
                                    <span>&nbsp;当日程结束前&nbsp;</span>
                                    <span><input type="number" min="1" max="31" maxlength="2" onkeyup="noticeDay=value>31?31:value"
                                                 class="form-control" style="width:28px;" v-model="noticeDay" :readonly="!noticeFlag" title=""/></span>
                                    <span>&nbsp;天，通知给参与人</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <button class="btn btn-info" @click="saveSchedule">新增日程</button>&nbsp;
                        <button class="btn btn-info-link" @click="closeSchedule" >取消</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
#parse("include/footer.html")
<script src="${rc.contextPath}/statics/js/projectManage/projProgress.js?_${date.systemTime}"></script>
</body>
</html>